{{> header}}
<div class="col">
  <label>points</label>
  <input
    type="number"
    placeholder="default 4"
    id="pointsEl" />
  <span>Maximum amount that can be consumed within [duration]</span>
</div>
<div class="col">
  <label>duration</label>
  <input
    type="number"
    placeholder="duration 4000ms"
    id="durationEl" />
  <span>The time for points to reset, in ms, the default is 4000 ms</span>
</div>
<div class="col">
  <label>blockDuration</label>
  <input
    type="number"
    placeholder="default 0"
    id="blockDurationEl" />
  <span
    >After reaching the rate limit, the block duration will be extended by [blockDuration] millisecond. For example, if
    the password is incorrect 5 times within 1 hour, the block will be locked for 24 hours. you can set this value to 24
    * 60 * 60 * 1000.</span
  >
</div>
<div class="col">
  <label>set custom storage</label>
  <select id="isCustomStorageEl">
    <option value="0">No</option>
    <option value="1">Yes</option>
  </select>
  <span>Whether to set a custom storage adapter</span>
</div>
<div class="col">
  <button id="btnSubmit">Start</button>
  <button
    id="btnReward"
    disabled>
    Reward points
  </button>
  <button
    id="btnPenalty"
    disabled>
    Penalty points
  </button>
  <button
    id="btnReset"
    disabled>
    Reset points
  </button>
</div>
<div id="dashboard"></div>

<script>
  const requestTimes = 10;
  let uid;
  let config;
  const append2Dashboard = res => {
    const divEl = document.createElement('div');
    divEl.innerHTML = JSON.stringify(res);
    dashboard.appendChild(divEl);
  };
  on('#btnSubmit', 'click', async () => {
    const points = toNumber(pointsEl.value);
    const duration = toNumber(durationEl.value);
    const blockDuration = toNumber(blockDurationEl.value);
    const isCustomStorage = isCustomStorageEl.value === '0' ? false : true;
    dashboard.innerHTML = '';
    btnSubmit.setAttribute('disabled', 'disabled');
    btnReward.removeAttribute('disabled');
    btnPenalty.removeAttribute('disabled');
    btnReset.removeAttribute('disabled');
    config = {
      points,
      duration,
      blockDuration,
      isCustomStorage
    };
    uid = Math.floor(Math.random() * 100000);

    try {
      for (let i = 0; i < requestTimes; i++) {
        const res = await alovaInstance.Post('/api/rateLimit', config, {
          cacheFor: null,
          headers: { uid }
        });
        append2Dashboard(res);
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
    } finally {
      btnSubmit.removeAttribute('disabled');
      btnReward.setAttribute('disabled', 'disabled');
      btnPenalty.setAttribute('disabled', 'disabled');
      btnReset.setAttribute('disabled', 'disabled');
    }
  });

  on('#btnReward', 'click', async () => {
    btnReward.setAttribute('disabled', 'disabled');
    const res = await alovaInstance.Post('/api/rateLimit/reward', config, {
      cacheFor: null,
      headers: { uid }
    });
    append2Dashboard(res);
    btnReward.removeAttribute('disabled');
  });

  on('#btnPenalty', 'click', async () => {
    btnPenalty.setAttribute('disabled', 'disabled');
    const res = await alovaInstance.Post('/api/rateLimit/penalty', config, {
      cacheFor: null,
      headers: { uid }
    });
    append2Dashboard(res);
    btnPenalty.removeAttribute('disabled');
  });

  on('#btnReset', 'click', async () => {
    btnReset.setAttribute('disabled', 'disabled');
    const res = await alovaInstance.Post('/api/rateLimit/delete', config, {
      cacheFor: null,
      headers: { uid }
    });
    append2Dashboard(res);
    btnReset.removeAttribute('disabled');
  });
</script>
